<template>
  <KView class="circle-zone-view">
    <KView class="circle-zone-view-content">
      <circle-zone-item v-for="circle in circleList" :key="circle.id" :circle="circle" :has-avatar="hasAvatar" :has-log="hasLog"
        :next-data-fun="setCircleLogList" @to-shop="toShop" @comment-circle="commentCircle" @praise-circle="toPraiseCircle"
        @praise-log="toPraiseCircleLog" @avatar-click="avatarClick" @submit-comment="submitComment">
      </circle-zone-item>
    </KView>
    <KView class="circle-zone-view-more" v-if="loading||pagination.hasNextPage()">
      <sys-loading v-if="loading" :size="60"></sys-loading>
      <KView v-else-if="pagination.hasNextPage()" class="circle-zone-view-btn" @click="lookMore">查看更多</KView>
    </KView>
    <KView class="circle-zone-view-null" v-else></KView>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import SysLoading from 'common/sysLoading';
  import CircleZoneItem from './circleZoneItem';

  import SysCircleApi from 'services/sysCircleApi';

  export default {
    props: {
      circleList: {
        type: Array,
        required: true
      },
      pagination: {
        type: Object,
        required: true
      },
      nextDataFun: {
        type: Function,
        required: true
      },
      hasAvatar: {
        type: Boolean,
        default: true
      },
      hasLog: {
        type: Boolean,
        default: false
      }
    },

    data() {
      return {
        loading: false,
        isMiniprogram: process.env.isMiniprogram
      };
    },

    methods: {
      lookMore() {
        if (this.loading) {
          return;
        }

        let pagination = this.pagination;
        if (!pagination.hasNextPage()) {
          return;
        }

        pagination.nextPage();
        this.loading = true;
        this.nextDataFun().then(() => {
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },

      getShareData(id) {
        let circleList = this.circleList;
        id = id.split('_')[1];

        let circleData = circleList.find(obj => obj.id === id);
        let path = `/personalCircle?unionid=${circleData.unionid}&id=${circleData.spaceId}`;

        return {
          path: path
        };
      },

      toShop(circle) {
        let shopData = circle.getShopData();
        if (this.isMiniprogram) {
          let data = SystemUtil.formatFormParam(shopData);
          window.open(`/shopMall?${data}`);
        }
      },

      commentCircle(circle) {
        let id = circle.spaceId;
        if (this.isMiniprogram) {
          window.open(`/commentCircle/${id}`);
        }
      },

      toPraiseCircle(circle) {
        if (circle.isPraise) {
          return;
        }

        SystemUtil.showLoading('');
        SysCircleApi.praiseCircleZone(circle).then(circleZone => {
          circle.resetCircleStatusData(circleZone);
          let pages = getCurrentPages();
          if (pages.length > 1) {
            let pageWin = pages[pages.length - 2].window;
            let pageName = pageWin.pageName;
            if (pageName === 'home') {
              pageWin.resetCircleZoneById(circleZone);
            }
          }
          this.$emit('praise-circle-success', circle);
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      setCircleLogList(circle, pagination = null, isInit = false, isKeep = false) {
        if (pagination === null) {
          pagination = circle.pagination;
        }

        return SysCircleApi.getCircleLogData(circle.spaceId, pagination, false, isKeep).then(res => {
          pagination.totalCount = res.count;
          circle.spaceLogCount = res.count;
          if (isInit) {
            circle.setCircleLog(res.logList, isInit, pagination);
          } else {
            circle.setCircleLog(res.logList, isInit);
          }
          return res;
        });
      },

      toPraiseCircleLog(circle, log) {
        if (log.isPraise) {
          return;
        }

        SystemUtil.showLoading('');
        SysCircleApi.praiseCircleZoneLog(log).then(logData => {
          log.resetCircleLogStatusData(logData);
          let pages = getCurrentPages();
          for (let i = 0; i < pages.length; i++) {
            const page = pages[i];
            let pageWin = page.window;
            if (pageWin.resetCircleZoneLogById) {
              pageWin.resetCircleZoneLogById(logData);
            }
          }

          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      avatarClick(circle) {
        let unionid = circle.unionid;
        let url = `/personalCircle?unionid=${unionid}`;
        if (this.isMiniprogram) {
          window.open(url);
        }
      },

      submitComment(circle, circleLog) {
        let code = circleLog.checkValid();
        if (code !== '') {
          let msg = this.i18n.getMsg(`sysCircle.commentCircle.error.${code}`);
          this.$api.showToast({
            title: msg,
            icon: 'none'
          });
          return;
        }

        SystemUtil.showLoading('');
        SysCircleApi.sendCircleLog(circleLog).then(() => {
          return this.setCircleLogList(circle, null, true, true).then(() => {
            circleLog.resetLogData(null, true);
            SystemUtil.hideLoading();
          });
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      },

      resetCircleZoneLog(circle) {
        SystemUtil.showLoading('');
        this.setCircleLogList(circle, null, true, true).then(() => {
          SystemUtil.hideLoading();
        }).catch(() => {
          SystemUtil.hideLoading();
        });
      }
    },

    components: {
      SysLoading,
      CircleZoneItem
    }
  };

</script>

<style lang="scss">
  .circle-zone-view {
    padding: 0 formatPx(30);

    .circle-zone-view-content {
      .circle-zone-item {
        margin-bottom: formatPx(60);

        &:last-child {
          margin-bottom: 0;
        }
      }
    }

    .circle-zone-view-more {
      position: relative;
      padding: formatPx(50) 0;
      height: formatPx(66);

      .circle-zone-view-btn {
        text-align: center;
        width: formatPx(255);
        height: 100%;
        line-height: formatPx(65);
        border: 1px solid #999999;
        font-size: formatPx(30);
        margin: auto;
        border-radius: formatPx(33);
      }
    }

    .circle-zone-view-null {
      height: formatPx(40);
    }
  }

</style>
